<template>
  <div class="spec">
    <a-radio-group v-model="type" @change="(val)=>changeType(val)">
      <a-radio :value="1">单规格</a-radio>
      <a-radio :value="2">多规格</a-radio>
    </a-radio-group>
    <div class="container" v-if="type == 1">
      <a-table bordered :columns="one_columns" :pagination="false" rowKey="id" :data-source="one_spec_List" >
        <div slot="pic" slot-scope="record">
          <picSelector size="40" class="acea-row row-center-wrapper" :value="record.pic" @confirm="(path)=>record.pic = path" ></picSelector>
        </div>
        <div slot="price" slot-scope="record">
          <a-input-number style="width:100%;" v-model="record.price" :min="0" :max="100000" />
        </div>
        <div slot="cost_price" slot-scope="record">
          <a-input-number style="width:100%;" v-model="record.cost_price" :min="0" :max="100000" />
        </div>
        <div slot="old_price" slot-scope="record">
          <a-input-number style="width:100%;" v-model="record.old_price" :min="0" :max="100000" />
        </div>
        <div slot="stock" slot-scope="record">
          <a-input-number style="width:100%;" v-model="record.stock" :min="0" :max="100000" />
        </div>
      </a-table>
    </div>
    <div class="container" v-else>
      <a-space>
        <a-select placeholder="选择规格模板" @change="(val) => spec_tmp_id = val" style="width: 300px" >
          <a-select-option v-for="(item,index) in spec_options" :key="index" :value="item.id">
            {{item.name}}
          </a-select-option>
        </a-select>
        <a-button type="primary" @click="getSpecTmp">确认</a-button>
      </a-space>
      <div v-if="show_tmp" class="tmp">
        <div class="tmp_01">
          <div class="content acea-row row-column" v-for="(item,index) in spec_tmp" :key="index">
            <div>{{item.title}}<a-icon class="icon" theme="filled" type="close-circle" @click="del_spec(index)" /></div>
            <div class="list acea-row">
              <div class="tag tag-dot acea-row row-middle" v-for="(tag,idx) in item.list" :key="idx">
                <div class="tag-dot-inner act" ></div>
                <div class="tag-text">{{tag}}</div>
                <div class="iconfont ivu-icon-ios-close" @click.stop="closeTag(tag,item.title)"></div>
              </div>
              <a-input-search placeholder="输入属性名称" style="width:200px;margin: 3px 0;" allowClear @search="(val)=>addType(val,item.title)">
                <a-button slot="enterButton" >添加</a-button>
              </a-input-search>
            </div>
          </div>
          <div class="btn acea-row">
            <!-- 生成规格 -->
            <div v-if="!show_add">
              <a-space>
                <a-button @click="show_add = true"><a-icon type="plus"  />添加新规格</a-button>
                <a-button type="primary" @click="createTwo">立即生成</a-button>
              </a-space>
            </div>
            <!-- 生成规格 -->
            <!-- 添加新规格模板 -->
            <div v-else>
              <a-form-model layout="inline" ref="formAdd" :model="formAdd"  >
                <a-form-model-item label="规格" prop="title" required>
                  <a-input v-model="formAdd.title" placeholder="请输入规格"></a-input>
                </a-form-model-item>
                <a-form-model-item label="规格值" prop="val" required>
                  <a-input v-model="formAdd.val" placeholder="请输入规格值"></a-input>
                </a-form-model-item>
                <a-form-model-item>
                  <a-space>
                    <a-button type="primary" @click="add">确定</a-button>
                    <a-button @click="close_add">取消</a-button>
                  </a-space>
                </a-form-model-item>
              </a-form-model>
            </div>
            <!-- 添加新规格模板 -->
          </div>
          <!-- 批量设置table模板 -->
          <div class="table acea-row row-column" v-if="show_two_table" style="margin-top:20px;">
            <div>批量设置:</div>
            <a-table bordered :columns="pl_columns" :pagination="false" rowKey="id" :data-source="pl_spec_List" >
              <div slot="pic" slot-scope="record">
                <picSelector size="40" class="acea-row row-center-wrapper" :value="record.pic" @confirm="(path)=>record.pic = path" ></picSelector>
              </div>
              <div slot="price" slot-scope="record">
                <a-input-number style="width:100%;" v-model="record.price" :min="0" :max="100000" />
              </div>
              <div slot="cost_price" slot-scope="record">
                <a-input-number style="width:100%;" v-model="record.cost_price" :min="0" :max="100000" />
              </div>
              <div slot="old_price" slot-scope="record">
                <a-input-number style="width:100%;" v-model="record.old_price" :min="0" :max="100000" />
              </div>
              <div slot="stock" slot-scope="record">
                <a-input-number style="width:100%;" v-model="record.stock" :min="0" :max="100000" />
              </div>
              <div slot="action" slot-scope="record">
                <a-button type="link" @click="createTwo">批量添加</a-button>
              </div>
            </a-table>
          </div>
          <!-- 批量设置table模板 -->
          <!-- 多规格table -->
          <div class="table acea-row row-column" v-if="show_two_table" style="margin-top:20px;">
            <div>商品属性:</div>
            <a-table bordered :columns="two_columns" :pagination="false" rowKey="id" :data-source="two_spec_List" >
              <div slot="pic" slot-scope="record">
                <picSelector size="40" class="acea-row row-center-wrapper" :value="record.pic" @confirm="(path)=>record.pic = path" ></picSelector>
              </div>
              <div slot="price" slot-scope="record">
                <a-input-number style="width:100%;" v-model="record.price" :min="0" :max="100000" />
              </div>
              <div slot="cost_price" slot-scope="record">
                <a-input-number style="width:100%;" v-model="record.cost_price" :min="0" :max="100000" />
              </div>
              <div slot="old_price" slot-scope="record">
                <a-input-number style="width:100%;" v-model="record.old_price" :min="0" :max="100000" />
              </div>
              <div slot="stock" slot-scope="record">
                <a-input-number style="width:100%;" v-model="record.stock" :min="0" :max="100000" />
              </div>
              <div slot="action" slot-scope="record">
                <a-button type="link" @click="del_two_spec(record.id)">删除</a-button>
              </div>
            </a-table>
          </div>
          <!-- 多规格table -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import picSelector from 'components/picSelector'
import request from 'api/request'

const one_columns = [
  { title: '图片', width:200, key: 'pic',scopedSlots: { customRender: 'pic' } ,align:'center' },
  { title: '售价', width:200,key: 'price',scopedSlots: { customRender: 'price' },align:'center' },
  { title: '成本价', width:200, key: 'cost_price',scopedSlots: { customRender: 'cost_price' },align:'center' },
  { title: '原价', width:200, key: 'old_price',scopedSlots: { customRender: 'old_price' },align:'center' },
  { title: '库存', width:200, key: 'stock',scopedSlots: { customRender: 'stock' },align:'center' },
]

const default_spec_List = [{
  id:1,
  pic:'',
  price:0,
  cost_price:0,
  old_price:0,
  stock:0,
}]

export default {
  components:{
    picSelector
  },
  data(){
    return{
      labelCol: { span: 7 },
      wrapperCol: { span: 15 },
      one_columns:[], //单规格table参数
      two_columns:[], //多规格table参数
      pl_columns:[], //批量设置table模板
      one_spec_List:[], //单规格数据
      two_spec_List:[], //多规格数据
      pl_spec_List:[], //批量设置数据
      spec_options:[], // 多规格选项
      type:1, 
      spec_tmp_id:null, // 多规格模板id
      spec_tmp:[], // 多规格模板数据
      spec_tmp_loop:1,
      show_tmp:false,
      show_add:false,
      show_two_table:false,
      formAdd:{
        title:'',
        val:''
      },
    }
  },
  created() {
    this.getSpec()
    this.changeType(1)
  },
  methods: {
    getSpec(){
      const that = this
      request.get("/product/spec/list").then(e=>{
        if(e.status == 200){
          that.spec_options = e.data
        }
      })
    },
    setData(type,tmp,list){
      this.changeType(type)
      if(type == 1){
        list[0].id = 1
        this.one_spec_List = list
      }else{
        let loop = 1
        for(let i of list){
          i.id = loop
          loop++
        }
        this.spec_tmp = tmp
        this.createTwo()
        this.two_spec_List = list
        this.show_tmp = true
      }
    },
    createTwo(){ //生成多规格属性
      let spec_tmp = [...this.spec_tmp]
      let pl_spec_List = [...this.pl_spec_List]
      let pl_columns = [...this.pl_columns]
      let data = process(spec_tmp,pl_spec_List,pl_columns)
      this.two_spec_List = data.arr
      this.two_columns = data.columns
      this.show_two_table = true
    },
    changeType(e){
      let val = typeof(e) == "object"?e.target.value:e
      this.type = val
      if(val == 1){
        this.one_columns = [...one_columns]
        this.one_spec_List = JSON.parse(JSON.stringify(default_spec_List))
      }else{
        let obj = {
          title: '操作', width:100, key: 'action',scopedSlots: { customRender: 'action' },align:'center'
        }
        this.pl_columns = [...one_columns]
        this.pl_columns.push(obj)
        this.pl_spec_List = JSON.parse(JSON.stringify(default_spec_List))
      }
    },
    outPut(){
      let one_spec_List = [...this.one_spec_List]
      let two_spec_List = [...this.two_spec_List]
      if(this.type == 1){
        for(let i of one_spec_List){
          delete i.id
        }
        return {tmp:[],list:one_spec_List,spec_type:this.type}
      }else{
        for(let i of two_spec_List){
          delete i.id
        }
        return {tmp:this.spec_tmp,list:two_spec_List,spec_type:this.type}
      }
    },
    getSpecTmp(){
      let f = this.spec_options.find(e=>e.id == this.spec_tmp_id)
      this.spec_tmp = JSON.parse(f.data)
      this.show_tmp = true
    },
    del_two_spec(id){ //删除多规格数据
      let two_spec_List = this.two_spec_List.filter(e=>e.id != id)
      this.two_spec_List = two_spec_List
    },
    addType(val,title){
      if(val != ""){
        let f = this.spec_tmp.find(e=>e.title == title)
        if(!f.list.find(e=>e == val)){
          f.list.push(val)
        }else{
          this.$message.error("规格重复")
        }
      }
    },
    del_spec(index){
      let spec_tmp = this.spec_tmp
      spec_tmp.splice(index,1)
    },
    add(){
      this.$refs.formAdd.validate((e)=>{
        if(e){
          let obj = {
            title:this.formAdd.title,
            list:[this.formAdd.val]
          }
          let spec_tmp = this.spec_tmp
          spec_tmp.push(obj)
        }
      })
    },
    close_add(){
      this.$refs.formAdd.resetFields()
      this.show_add = false
    },
    closeTag(name,title){
      let f = this.spec_tmp.find(e=>e.title == title)
      f.list = f.list.filter(e=>e != name)
    }
  },
}

function process(spec_tmp,pl_spec_List,pl_columns){
  let arr = []
  let columns = []
  let loop = 1
  for(let i of spec_tmp){
    let res = arr
    let idx = 1
    let id = 1
    for(let j of i.list){
      let o = {
        title:i.title,
        value:j
      }
      if(loop > 1){
        for(let k of res){
          k["value"+loop] = j
          k["value"].push(o)
          k["id"] = id
          id++
        }
        if(idx == 1){arr = JSON.parse(JSON.stringify(res))}else{arr = arr.concat(JSON.parse(JSON.stringify(res)))}
      }else{
        let obj = {}
        obj["value"+loop] = j
        obj["value"] = [o]
        Object.assign(obj,pl_spec_List[0])
        arr.push(obj)
      }
      idx++
    }
    let c = {
      title: i.title,
      width: 100,
      key: "value"+loop,
      dataIndex:"value"+loop
    }
    columns.push(c)
    loop++
  }
  columns = columns.concat(pl_columns)
  return {arr,columns}
}
</script>

<style scoped>
  .spec .container{
    margin-top: 10px;
  }
  .spec .container .tmp .tmp_01 .content .icon{
    color: #515a6e;
    margin-left: 5px;
    cursor: pointer;
  }
  .spec .container .tmp .tmp_01 .content .list{
    width: 100%;
  }
  .spec .container .tmp .tmp_01 .content .tag{
    height: 22px;
    margin: 2px 4px 2px 0;
    padding: 0 8px;
    border: 1px solid #e8eaec;
    border-radius: 3px;
    background: #f7f7f7;
    font-size: 12px;
    vertical-align: middle;
    opacity: 1;
    overflow: hidden;
    cursor: pointer;
    flex-wrap: nowrap;
  }
  .spec .container .tmp .tmp_01 .content .tag-dot{
    height: 32px;
    border: 1px solid #e8eaec!important;
    color: #515a6e!important;
    background: #fff!important;
    padding: 0 12px;
  }
  .spec .container .tmp .tmp_01 .content .tag .tag-dot-inner{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 50%;
    background: #e8eaec;
    position: relative;
    top: 1px;
  }
  .spec .container .tmp .tmp_01 .content .tag .tag-dot-inner.act{
    background: #2d8cf0;
  }
  .spec .container .tmp .tmp_01 .content .tag .tag-text{
    color: #515a6e;
  }
  .spec .container .tmp .tmp_01 .content .tag .iconfont{
    font-size: 21px;
    line-height: normal;
    margin-left: 8px;
  }
  .spec .container .tmp .tmp_01 .btn{
    margin-top: 20px;
  }
</style>